<script setup lang="ts">
  import { ref, computed } from 'vue'
  interface IProps {
    labels: string[]
  }
  const props = withDefaults(defineProps<IProps>(), {
    labels: () => []
  })
  const emit = defineEmits<{ click: [text: string] }>()
  const labels = computed(() => props.labels)
  const curIndex = ref(0)
  function onClickText(text: string, index: number) {
    emit('click', text)
    curIndex.value = index
  }
</script>

<template>
  <div class="ud-text-segment-box flex flex-center">
    <span class="flex items-center" v-for="(text, index) in labels" :key="text">
      <i
        class="not-italic cursor-pointer"
        :class="[curIndex === index ? 'text-[#2265D4]' : 'text-[#999]']"
        @click.stop="onClickText(text, index)">
        {{ text }}
      </i>
      <b class="inline-block font-normal w-1 h-1 rounded-[50%] bg-[#c0c4cc] mx-2.5"></b>
    </span>
  </div>
</template>

<style scoped>
  .ud-text-segment-box span:last-child > b {
    display: none !important;
  }
</style>
